<template>
	<view class="my-venues">
		<u-sticky>
			<u-tabs :list="tabsList" lineColor="#4786fe" :activeStyle="{
          color: '#2f75fa',
        }" :inactiveStyle="{
          color: '#353535',
        }" :lineWidth="30" :current="currentTab" @click="onClickTab" />
		</u-sticky>
		<view class="list" v-if="list.length">
			<view class="item" v-for="item in list" :key="item.id">
				<navigator
					:url="`/pages/personal/qrcode/qrcode?id=${item.id}&court_no=${item.court_no}&title=我的场地&choose=选择场地&beShare=${item.beShare}&sender=${item.usermobile}&product_id=${item.product_id}&court_id=${item.court_id}&field_type=${item.field_type}&c_type=1`">
					<view class="d-flex" v-if="currentTab == 0" style="
					  display: flex;
					  justify-content: space-between;
					  align-items: center;margin-bottom: 20rpx;
					">
						<view class="venus-name" style="font-size: 32rpx;"> {{item.venue_name}} </view>
						<view class="venus-name" v-if="item.field_type == 2"> 名额场 </view>
						<view class="venus-name" style="color: coral;" v-if="item.field_type == 1"> 包场 </view>
						<view class="venus-name" style="color: coral;" v-if="item.field_type == 3"> 拼团 </view>
						<view style="width: 100rpx; height: 100rpx;margin-top: -70rpx;">
							<view class="qrcode" style="margin-left: 50rpx;margin-top: 50rpx;">
								<u-image :src="`${assetsPath}ef6dd95103211de6cf64afffdf636689042704d0.png`"
									width="52rpx" height="52rpx" shape="square"></u-image>
							</view>
						</view>
					</view>
				</navigator>
				
				<navigator v-if="current_year_month == item.choose_date"
					:url="`/pages/personal/qrcode/qrcode?id=${item.id}&court_no=${item.court_no}&title=我的场地&choose=选择场地&beShare=${item.beShare}&sender=${item.usermobile}&product_id=${item.product_id}&court_id=${item.court_id}&field_type=${item.field_type}&c_type=2`">
					<view class="d-flex" v-if="currentTab == 1" style="
					  display: flex;
					  justify-content: space-between;
					  align-items: center;margin-bottom: 20rpx;
					">
						<view class="venus-name" style="font-size: 32rpx;color: #cccccc;"> {{item.venue_name}} </view>
						<view class="venus-name" style="color: #cccccc;" v-if="item.field_type == 2"> 名额场 </view>
						<view class="venus-name" style="color: coral;color: #cccccc;" v-if="item.field_type == 1"> 包场 </view>
						<view class="venus-name" style="color: coral;color: #cccccc;" v-if="item.field_type == 3"> 拼团 </view>
						<view style="width: 100rpx; height: 100rpx;margin-top: -70rpx;">
							<view class="qrcode" style="margin-left: 50rpx;margin-top: 50rpx;">
								<u-image :src="`${assetsPath}ef6dd95103211de6cf64afffdf636689042704d0.png`"
									width="52rpx" height="52rpx" shape="square"></u-image>
							</view>
						</view>
					</view>
				</navigator>
				<view class="" v-if="currentTab == 0">
					<view class="share_m" v-if="item.beShare == 1">
						球友分享
					</view>
				</view>
				<view class="" v-if="currentTab == 1">
					<view class="share_a" v-if="item.is_over == 1">
						<u-button id="shareBtn" plain='true' open-type="share"
							customStyle="border:none ;color :#ff0000;">超时</u-button>
					</view>

				</view>
				<navigator v-if="currentTab == 0"
					:url="`/pages/personal/qrcode/qrcode?id=${item.id}&court_no=${item.court_no}&title=我的场地&choose=选择场地&beShare=${item.beShare}&sender=${item.usermobile}&product_id=${item.product_id}&court_id=${item.court_id}&field_type=${item.field_type}`">
					<view class="d-flex">
						<u-image width="124rpx" height="124rpx" radius="10rpx" :src="item.goods.goods_image"></u-image>

						<view style="margin-left: 16rpx">
							<view class="name blod">{{ item.court_name}}</view>
							<view class="venue">{{ item.field_name }}</view>
							<view class="date">{{ item.start_time }} - {{ item.end_time }}</view>
						</view>
					</view>
				</navigator>

				<view class="d-flex" v-if="currentTab == 1">
					<u-image width="124rpx" height="124rpx" radius="10rpx" :src="item.goods.goods_image"></u-image>
					<view style="margin-left: 16rpx">
						<view class="name blod" style="color: #cccccc;">{{ item.court_name}}</view>
						<view class="venue" style="color: #cccccc;">{{ item.goods_name }}</view>
						<view class="date" style="color: #cccccc;">{{ item.start_time }} - {{ item.end_time }}</view>
					</view>
				</view>

				<view class="d-flex" v-if="currentTab == 0" style="display: flex;justify-content: space-between;align-items: center;margin-top: 10rpx;">
					<view class="" style="display: flex; flex-direction: row;align-items: center;" v-if="item.beShare == 0">
						<view class="venus-name"> ({{item.share_num}}/{{item.total_share}}) </view>
						<view class="" style="display: flex;flex-direction: row;margin-left: 20rpx; ">
							<view class="" style="display: flex;flex-direction: row; "  v-for="(im,idx) in item.share_friends.slice(0, 8)" :key="idx">
								<image style="width: 40rpx;height: 40rpx;" :src="im.avatar" mode=""></image>
							</view>
						</view>
					</view>
					<view style="" @click="onClickMenulist(item)" v-if="item.beShare == 0">
						<view
							style="font-size: 26rpx;padding: 6rpx 13rpx;background-color: antiquewhite;border-radius: 10rpx;">
							分享球友
						</view>
					</view>
				</view>
			</view>

		</view>


		<u-empty v-else text="暂无数据" icon="http://cdn.uviewui.com/uview/empty/data.png" />
	</view>
</template>

<script>
	const index = require('@/api/personal/index.js')
	export default {
		data() {
			return {
				share: {
					title: '自定义分享标题',
					fx_goods_image: '',
				},
				panel: false,
				status: 0,
				assetsPath: this.$https.assetsPath,
				currentTab: 0,
				tabsList: [{
					name: "进行中"
				}, {
					name: "已结束"
				}],
				list: [],
				listQuery: { //分页
					limit: 8,
					page: 1,
				},

				totalPage: "",
				over: "",
				currents: 0,
				current_year_month:''
			};
		},
		onLoad(options) {
			this.getMyCourt()
			if (options != '') {
				if (uni.getStorageSync("openid") == '') {
					uni.showToast({
						title: '请登录！',
						icon: 'exception',
						duration: 850
					});
					uni.reLaunch({
						url: '/pages/personal/personal'
					})
				}
			}
		},
		methods: {
			// 获取今天当前日期
			getCurrentMonthDay() {
				var _this = this
				var now = new Date()
				var y = now.getFullYear()
				var m = now.getMonth() + 1
				var d = now.getDate()
				var h = now.getHours(); //获取当前小时数(0-23)
				var min = now.getMinutes(); //获取当前分钟数(0-59)
				if (m < 10) {
					m = '0' + m
				}
				if (d < 10) {
					d = '0' + d
				}
				if (h < 10) {
					h = '0' + h
				}
				if (min < 10) {
					min = '0' + min
				}
				var date = m + '/' + d
				var date_s = m + '-' + d
				_this.current_month_day = date_s
				_this.current_year_month = y + '-' + m + '-' + d
				console.log(_this.current_year_month,'2222')
			},
			onClickMenulist(item) {
				if (item.field_type != 2) {
					console.log(item,'pp')
					uni.navigateTo({
						url: '../../page_venues/pages/venuesDetail/sharedBy/sharedBy?id=' + item.id +
							"&court_no=" + item.court_no +
							"&beShare=" + item.beShare
					})
				} else {
					uni.showToast({
						title: '您暂无分享权利。',
						icon: 'error',
						duration: 1500
					});
				}
			},
			// 获取我的场地详情
			async getMyCourt() {
				let that = this;
				if (that.listQuery.page === 1) that.list = [];
				let params = {
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					open_id: uni.getStorageSync("openid"),
					// status: 0,
					id: '',
					expired: this.currents,
					page: this.listQuery.page,
					limit: this.listQuery.limit,
					over: this.over
				}
				let res = await index.getMyCourt(params)
				if (res.code === 1) {
					// this.list = res.data.result
					that.list = that.list.concat(res.data.ticketData); //将数据拼接在一起
					that.totalPage = res.data.page
				}
			},
			// 下拉刷新
			onReachBottom() {
				if (this.totalPage <= this.listQuery.page) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.page += 1;
				this.getMyCourt()
			},
			onClickTab({
				index

			}) {
				if (index == 1) {
					this.over = 1
					this.getCurrentMonthDay()
				} else {
					this.over = ''
				}
				if (index == 0) {
					this.currents = 0;
				} else {
					this.currents = 1;
				}
				this.currentTab = index;
				this.list = []
				this.listQuery.page = 1
				this.getMyCourt()
			},
			fx_click(item) {
				this.share.fx_goods_image = item.goods.goods_image
			},
			// 分享页面
			onShareAppMessage(res) {
				if (res.from === 'button') { // 来自页面内分享按钮
				}
				return {
					title: '荆门市体育场馆',
					path: '/pages/personal/personal?id=' + 12,
					imageUrl: this.share.fx_goods_image, //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
					success: function(res) {
						// 转发成功之后的回调
						if (res.errMsg == 'shareAppMessage:ok') {}
					},
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.venus-name {
		// margin-top: 20rpx;
		font-size: 28rpx;
		color: #999999;
	}

	.share {
		width: 68rpx;
		height: 68rpx;
		background: rgb(18, 132, 247);
		background: linear-gradient(45deg,
				rgba(18, 132, 247, 1) 0%,
				rgba(7, 177, 253, 1) 77%,
				rgba(87, 202, 251, 1) 100%);
		border-bottom-left-radius: 100rpx;
		position: absolute;
		right: 0;
		top: 0;

		/deep/ .u-icon {
			display: flex;
			justify-content: flex-end;
			margin-right: 7rpx;
		}
	}

	.share_s {
		font-size: 32rpx;
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		color: #2f75fa;
	}

	.my-venues {
		padding-bottom: env(safe-area-inset-bottom);

		/deep/.u-tabs {
			background-color: #fff;
			border-bottom: 1px solid #e5e5e5;
			// margin: 0 30rpx;

			.u-tabs__wrapper__nav__item {
				flex: 1;
			}

			.u-tabs__wrapper__nav__line {
				bottom: 0;
			}
		}

		.list {
			padding: 30rpx;
			line-height: 34rpx;
			color: #333333;
		}

		.item {
			padding: 30rpx;
			background: #ffffff;
			box-shadow: 0px 6rpx 13rpx 1rpx rgba(23, 106, 180, 0.2);
			border-radius: 20rpx;
			position: relative;

			&+.item {
				margin-top: 30rpx;
			}

			.name {
				font-size: 30rpx;
			}

			.venue {
				font-size: 24rpx;
				margin: 19rpx 0;
			}

			.date {
				font-size: 24rpx;
				color: #888888;
			}

			.to {
				background: #f3f3f3;
				border-radius: 50%;
				width: 51rpx;
				height: 51rpx;
			}

			.share_m {
				width: 140rpx;
				height: 60rpx;
				border-radius: 50%;
				position: absolute;
				top: 12%;
				right: -30rpx;
				font-size: 25rpx;

			}

			.share_mc {
				width: 140rpx;
				height: 60rpx;
				border-radius: 50%;
				position: absolute;
				top: 18%;
				right: 160rpx;
				font-size: 25rpx;

			}

			.share_a {
				width: 140rpx;
				height: 60rpx;
				border-radius: 50%;
				position: absolute;
				top: 5%;
				right: 3rpx;

				#shareBtn {
					width: 110rpx;
					height: 60rpx;
					position: absolute;
					border-radius: 50%;
					top: 0;
					left: -2rpx;
					opacity: 0.1;
					font-size: 20rpx;
					text-align: center;
					line-height: 60rpx;
				}
			}
		}
	}
</style>